<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="message" placeholder="请输入内容">
    内容：{{message}}

    <br>

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>

    <input type="checkbox" id="a" value="Mr.Lee" v-model="checkedNames">
    <label for="a">Mr.Lee</label>

    <input type="checkbox" id="b" value="Mr.Wang" v-model="checkedNames">
    <label for="b">Mr.Wang</label>

    <input type="checkbox" id="c" value="Mr.Zhang" v-model="checkedNames">
    <label for="c">Mr.Zhang</label>

    人员：{{checkedNames}}

    <br>

    <input type="radio" id="one" value="男" v-model="gender">
    <label for="one">男</label>

    <input type="radio" id="two" value="女" v-model="gender">
    <label for="two">女</label>

    性别：{{gender}}

    <select v-model="selected">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>

    城市：{{selected}}

    <select v-model="selected2" multiple>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>

    城市：{{selected2}}
</div>


<script src="../js/vue.js"></script>
<script>
    //去掉警告
    Vue.config.productionTip = false;

    //数据对象
    const dataObj = {
        message : '',
        checked : false,
        checkedNames : [],
        gender : '男',
        selected : '未选',
        selected2 : []
    };

    //创建一个Vue对象
    const app = new Vue({
        el : '#app',
        data : dataObj,

        //计算属性，固定名称
        computed : {

        },

        //方法
        methods : {

        }
    });










</script>
</body>
</html>
